<template>
	<!-- <view class="container"> -->
	

	<view class="box">
		 <!-- :style="'padding-top:' + customBar + 'px;height:calc(100vh - '+customBar+'px)'" -->
		<view class="my" :style="'height:' + customBar + 'px;line-height:'+customBar+ 'px'">
			我的
		</view>
		<view class="wechat" :style="'padding-top:' + customBar + 'px;'" >
			<image src="../../static/wx.png" alt="">
				<view class="wechat-name">
					<view style="display: flex;">
						<view style="font-weight: bold;">
							王强
						</view>
						<view class="gohome">
							入住15天
						</view>
					</view>
					<view class="wechat-family">
						家属姓名:王璐璐
					</view>
					<view class="wechat-family">
						手机号码：138 555 666
					</view>
				</view>
		</view>
		<view class="account">
			<view class="account-money">
				余额 ￥32.9
				<view class="account-over">
					<image src="../../static/remind.png" alt="">
						<view class="account-wz">
							用户余额可用来生活缴费
						</view>
				</view>
			</view>
			<view class="account-value">
				充值
			</view>
		</view>
		<view class="account-two">
			<view class="">
				<view class="account-two-one">
					0.03
				</view>
				<view class="account-two-two">
					电费
				</view>
			</view>
			<view class="">
				<view class="account-two-one">
					0.03
				</view>
				<view class="account-two-two">
					电费
				</view>
			</view>
			<view class="">
				<view class="account-two-one">
					0.03
				</view>
				<view class="account-two-two">
					电费
				</view>
			</view>
			<view class="">
				<view class="account-two-one">
					0.03
				</view>
				<view class="account-two-two">
					电费
				</view>
			</view>
		</view>
		<view class="menu-nav">
			快速通道
		</view>
		<view class="menu">
			<view class="">
				<image src="../../static/组 1@3x.png" alt="">
			</view>
			<view class="">
				<image src="../../static/组 2@3x.png" alt="">
			</view>
			<view class="">
				<navigator url="/pages/property/property" class="welcome-out">
					<image src="../../static/组 12@3x.png" alt="">
				</navigator>
			</view>
			<view class="">
				<navigator url="/pages/goeat/goeat" class="welcome-out">
					<image src="../../static/组 4@3x.png" alt="">
				</navigator>
			</view>
			<view class="">
				<navigator url="/pages/case/case" class="welcome-out">
					<image src="../../static/组 10@3x.png" alt="">
				</navigator>
			</view>
			<view class="">
				<navigator url="/pages/pay/pay" class="welcome-out">
					<image src="../../static/组 8@3x.png" alt="">
				</navigator>
			</view>
			<view class="">
				<navigator url="/pages/govisit/govisit" class="welcome-out">
					<image src="../../static/组 11@3x.png" alt="">
				</navigator>
			</view>
			<view class="">
				<navigator url="/pages/home/home" class="welcome-out">
					<image src="../../static/组 13@3x.png" alt="">
				</navigator>
			</view>
		</view>
	<!-- </view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
               customBar:0,
			};
		},
		onLoad(){
			const that = this;
			// this.getUserInfo()
			uni.getSystemInfo({
				success: function(res) {
					const navHeight = res.statusBarHeight +46; //46px是官方规定的导航栏高度
					that.customBar = navHeight;
				}
			});
		}
	}
</script>
<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 440rpx;
		background-color: #3B73EE;

		.my {
			text-align: center;
			line-height: 70px;
			color: aliceblue;
			font-weight: bold;
		}

		.wechat {
			display: flex;

			.gohome {
				width: 150rpx;
				height: 30rpx;
				border: 1rpx solid #ccc;
				background-color: #BB965F;
				border-radius: 60rpx;
				text-align: center;
				line-height: 28rpx;
				margin-left: 30rpx;
				margin-top: 5rpx;
				font-size: 25rpx;
			}
		}

		.wechat image {
			width: 450rpx;
			height: 300rpx;
			position: absolute;
			top: -40rpx;
			left: -75rpx;
		}

		.wechat-name {
			position: absolute;
			top: 110rpx;
			left: 170rpx;
			font-size: 30rpx;
			// font-weight: bold;
			color: aliceblue;

			.wechat-family {
				margin-top: 10rpx;
				font-size: 25rpx;
			}
		}

		.account {
			display: flex;
			width: 90%;
			height: 200rpx;
			background-color: #31302E;
			position: absolute;
			top: 300rpx;
			left: 40rpx;
			border-radius: 15rpx;

		}

		.account-two {
			display: flex;
			width: 90%;
			height: 150rpx;
			background-color: #F6F6F6;
			position: absolute;
			top: 420rpx;
			left: 40rpx;
			border-radius: 15rpx;
			background-color: aliceblue;
			justify-content: space-around;
			text-align: center;
			line-height: 25rpx;
			font-weight: bold;
		}

		.menu-nav {
			border: 1rpx solid #F6F6F6;
			width: 86.8%;
			height: 60rpx;
			position: absolute;
			top: 600rpx;
			left: 40rpx;
			font-size: 30rpx;
			background-color: #F6F6F6;
			line-height: 80rpx;
			padding-left: 20rpx;
			font-weight: bold;
			border-radius: 15rpx 15rpx;
		}

		.menu {
			// border: 1rpx solid #ccc;
			width: 90%;
			height: 300rpx;
			position: absolute;
			top: 660rpx;
			left: 40rpx;
			background-color: #F6F6F6;
			border-radius: 0rpx 0rpx 15rpx;
		}

		.menu {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			// padding: 20rpx;
		}

		.menu view {
			padding: 15rpx;
			margin-top: -10rpx;
		}

		.menu view image {
			width: 100rpx;
			height: 100rpx;
			display: flex;
			margin: 20rpx;
		}

		.account-two view {
			margin-top: 20rpx;
		}

		.account-two-one {
			color: red;
			font-size: 35rpx;
			font-weight: bold;
		}

		.account-two-two {
			font-size: 27rpx;

		}

		.account-money {
			font-size: 35rpx;
			color: aliceblue;
			margin-top: 20rpx;
			margin-left: 40rpx;

			.account-over {
				color: #F5D49C;
				font-size: 25rpx;
				margin-top: 10rpx;
			}
		}

		.account-over image {
			width: 30rpx;
			height: 30rpx;
			margin-left: -2rpx;
		}

		.account-wz {
			position: absolute;
			top: 75rpx;
			left: 75rpx;
		}

		.account-value {
			width: 110rpx;
			height: 50rpx;
			border-radius: 50rpx;
			font-size: 17rpx;
			color: aliceblue;
			position: absolute;
			top: 50rpx;
			left: 500rpx;
			text-align: center;
			line-height: 48rpx;
			background-color: #BB965F;
			font-weight: bold;
		}
	}
</style>
